<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'

  export default {
    name: 'w-progress',
    mixins: [WidgetBase],
    props: ['percent', 'range', 'text'],
    methods: {
      html_slots() {
        let w = $.number(this.x.percent)
        return [
          this.x.text && h('span', {
            class: 'w-progress-text'
          }, this.x.text),
          h('div', {
            class: 'w-progress-gut',
            style: {
              width: `${w}%`
            }
          }, h('div', {
            class: 'w-progress-bar f-flex f-flex-center',
            style: {
              width: `${w==0?w:(100*100/w)}%`
            }
          }, this.x.text && h('span', {
            class: 'w-progress-text'
          }, this.x.text)))
        ]
      }
    },
    computed: {
      html_class() {
        if (this.x.range) {
          let a = this.x.range.split(',')
          for (let i = a.length - 1; i >= 0; i--) {
            if ($.number(this.x.percent) >= $.number(a[i])) return 'z-' + a[i]
          }
        }
      }
    }
  }
</script>

<style>
  .w-progress {
    display: flex;
    position: relative;
    height: 18px;
    border-radius: 20px;
    background: #e6e6e6;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
  }

  .w-progress-gut {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--w--focus-color);
    border-radius: 20px;
    overflow: hidden;
    transition: width, background .1s cubic-bezier(.78, .14, .15, .86);
  }

  .w-progress-bar {
    color: #fff;
    height: 100%;
  }
</style>
